<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=width-device,initial-scale=1.0,user-scalable=no" />
		<title>查询专业</title>		
		<link rel="stylesheet" href="js/bootstrap/css/bootstrap.css" />
		<link rel="stylesheet" href="js/datetimepicker/jquery.datetimepicker.css" />
		<style>
			.pagination{
				margin-top: 0!important;
			}
		</style>
	</head>
	<body>
		<div class="container">			
			
			<h2 class="page-header">查询数据列表</h2>
			<table id="dataTable" class="table table-bordered table-striped">
				<thead>
					<tr>
						<th>专业编号</th>
						<th>专业名称</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(majors,index) in majorsData">
						<td>{{majors.majorsId}}</td>
						<td>{{majors.majorsName}}</td>
						<td>
							<input type="button" value="修改" class="btn btn-info btn-sm" @click="toUpdate(majors.majorsId,index)"/>
							<input type="button" value="删除" class="btn btn-danger btn-sm" @click="del(index,majors.majorsId)"/>
						</td>
					</tr>				
				</tbody>
			</table>
			<!--分页工具条 -->
			<div id="row">
				<div class="col-sm-4">
					<div id="pageInfo">共{{pager.recordCount}}条数据  {{pager.pageNum}}/{{pager.pageCount}}页</div>
				</div>
				<div class="col-sm-8">
					<nav id="pageNav">
						<ul class="pagination pagination-sm pull-right">
							<li><a href="javascript:;" id="firstPage" @click="query(1)" v-show="pager.pageNum!=1">首页</a></li>
							<li><a href="javascript:;" id="prevPage" @click="query(pager.pageNum-1)" v-show="pager.pageNum!=1">上页</a></li>
							
							<li :class="{active:pager.pageNum==i}" @click="query(i)" v-for="i in pageBtns"><a href="javascript:;">{{i}}</a></li>
							
							<li><a href="javascript:;" id="nextPage" @click="query(pager.pageNum+1)" v-show="pager.pageNum!=pager.pageCount">下页</a></li>
							<li><a href="javascript:;" id="lastPage" @click="query(pager.pageCount)" v-show="pager.pageNum!=pager.pageCount">末页</a></li>
						</ul>
					</nav>
				</div>
			</div>
			<!--增加员工按钮-->
			<div class="row">
				<div class="col-sm-4 col-sm-offset-8">
					<a href="AddMajors.html" class="btn btn-success btn-block">增加专业</a>
				</div>
			</div>
		</div>		
		
		<script type="text/javascript" src="js/vue2.5.js" ></script>
		<script type="text/javascript" src="js/axios.min.js" ></script>
		<script type="text/javascript" src="js/jquery.js" ></script>
		<script type="text/javascript" src="js/global.js" ></script>
		<script type="text/javascript" src="js/bootstrap/js/bootstrap.js" ></script>
		<script type="text/javascript" src="js/layer/layer.js" ></script>
		<script type="text/javascript" src="js/datetimepicker/jquery.datetimepicker.js" ></script>
		<script>			
			//vue实例
			var vue = new Vue({
				el:'.container',
				data:{
					majorsData:[],//员工数据
					pager:{},//分页数据
					pageBtns:[] //分页按钮数组
				},
				methods:{
					//查询数据方法
					query:function(pageNum){
						
						axios.get(baseUrl + '/majors/queryPager',{
								params:{
									pageNum:pageNum,
									pageSize:10
								}
							})
							.then(function(response){
								
								//响应的职业数据集合赋值给数据模型
								this.majorsData = response.data.list;
								//响应的分页数据赋值给数据模型
								this.pager = response.data.pager;	
								
								//生成分页页码按钮
								var start = this.pager.pageNum - 2;
								var end = this.pager.pageNum + 2;
								
								if (this.pager.pageNum <= 3) {
									start = 1;
									end = 5;
								}
								
								if (end > this.pager.pageCount) {
									end = this.pager.pageCount;
								}
																
								this.pageBtns = [];
								
								for (var i = start;i <= end;i ++) {
									this.pageBtns.push(i);	
								}								
							}.bind(this))
							.catch(function(error){
								layer.msg('获得专业列表失败');
							});
						
					},
					del:function(index , majorsId){
						var flag = window.confirm('是否确定删除该专业数据');
						if(!flag){
							return;
						}
						axios.get(baseUrl + '/majors/delete',{
									params:{
										majorsId:majorsId
									}
								})
								.then(function(response){
									layer.msg('删除专业成功');
									//前端删除员工数据
									vue.majorsData.splice(index , 1);
									
								}.bind(this))
								.catch(function(error){
									layer.msg('删除专业失败');
								});
					},
					toUpdate:function(majorsId,index){
						
						layer.open({
							title:'修改',
							type:2,
							area:['700px','800px'],
							content:'UpdateMajors.html?majorsId=' + majorsId + '&index=' + index
						});
						
					}
				},
				mounted:function(){
					this.query(1);					
				}				
			});			
		</script>		
	</body>
</html>